$(function(){
      // 给所有的楼层加上随机颜色; 
      var $section = $(".section"); 

      // 让楼梯按钮可以在特定的高度下显示出来; 

      var $staris = $(".stairs-btn");

      $(window).scroll( function(){
            // 获取scrollTop
            var scrollTop = $("html,body").scrollTop();
            
            // 控制按钮的显示隐藏; 
            starisBtnToggle(scrollTop);
            // 根据scrollTop设置按钮的下标; 
            setStairsButtonIndex( scrollTop );
      });
      // 控制按钮的显示隐藏; 
      function starisBtnToggle(scrollTop){
            if( scrollTop > 900 ){
                  $staris.show();
            }else{
                  $staris.hide();
            }
      }
      // 根据scrollTop设置按钮的下标; 

      var section_top_list = [];
      for(var i = 0 ; i < $section.length ; i ++){
            section_top_list.push( $section.eq(i).offset().top ) 
      }

      var $stairs_btn = $(".stairs-btn li")
      function setStairsButtonIndex( scrollTop ){
            // 1. 如果小于了数组的第0项下标是1; 
            // 2. 如果大于前一项并且小于后一项; 下标就是前一项;  
            // 3. 如果大于最后一项那么下标就是数组的长度减一; 
            $stairs_btn.eq( getButtonIndex( scrollTop ) ).addClass("active")
            .siblings()
            .removeClass("active")
      }

      function getButtonIndex( scrollTop ){
            // 如果scrollTop 小于第0项那么我们就返回下标0;
            if( section_top_list[0] >= scrollTop ){
                  return 0;
            // 如果scrollTop 大于最后一项我们就返回最后一项下标; 
            }else if( section_top_list[ section_top_list.length - 1] <= scrollTop ){
                  return section_top_list.length - 1
            }else{
            // 如果scrollTop 大于前一项且小于后一项那么我们就返回当前项的下标; 
                  for(var i = 0 ; i < section_top_list.length - 1; i ++){
                        if( scrollTop >= section_top_list[i] && scrollTop < section_top_list[ i + 1 ]){
                             return i ; 
                        }
                  }
            }
      }

      // 因为在页面刷新时，某些时候不会触发window.scroll事件, 这时候我们应该去主动触发一下这个事件确保元素能正确的显示或者隐藏; 
      $(window).trigger("scroll");

      // 点击按钮让页面跳转到对应的楼层 : 
      // - 就是让我们的scrollTop 跳转到对应的值; 
      // - 事件 : 按钮点击事件; 
      $(".stairs-btn li").click(function(){
            // 1. 找到元素下标; 
            var index = $(this).index(".stairs-btn li");
            // 2. 根据下标找到对应的楼层;获取楼层高度 , 图片不能撑起元素高度;  
            var _top = $section.eq( index ).offset().top;
            // 3. 给window设置高度让其滚动到对应的scrollTop 位置; 
            // console.log(_top);
            $("html,body").stop(true).animate({
                  scrollTop : _top
            });
      });

      // 页面卷动让楼梯按钮对应选中; 
      // 应该根据 scrollTop 去判断此时所在的楼层; 

});